@use "@/common/styles/colors"

.install-step
  display: flex
  align-items: center
  gap: 1rem

  .indicator
    display: flex
    justify-content: center
    align-items: center
    width: 1.4rem
    height: 1.4rem
    padding: 0.3rem
    border-radius: 40%

  .progress-indicator
    background-color: colors.$primary-opacity
    svg
      width: 30px
      height: 30px

    .progress-circle
      stroke: colors.$primary
      stroke-width: 3
      stroke-linecap: round
      transform: rotate(-90deg)
      transform-origin: 50% 50%
      transition: stroke-dashoffset 0.35s ease

  .skip-indicator
    background-color: colors.$gray
    color: colors.$light-gray

  .image-indicator img
    height: 1.4rem

  .soon-indicator
    outline: 2px solid colors.$gray

  .success-indicator
    background-color: colors.$success-opacity
    color: colors.$success

  .error-indicator
    background-color: colors.$error-opacity
    color: colors.$error

  .loading-indicator
    background-color: colors.$primary-opacity
    color: colors.$primary

  h2
    font-size: 1.3rem
    font-weight: 600
    margin: 0
